<template>
  <div class="pass-temp">
    <div style="margin-bottom:10px;font-size:14px;">
      <span style="display: inline-block;width:96px;">{{$t('qualityCheck.quality')}}</span>
      <span>{{$t('qualityCheck.qualityResult')}}</span>
    </div>
    <div class="pass-temp-tree">
      <div v-for="(one, index) in configList" :key="index">
        <el-row :gutter="5">
          <el-col :span="2"><span>{{index + 1}} :</span></el-col>
          <el-col :span="22"><item :model="one" :form="form" :disabled="disabled"></item></el-col>
        </el-row>
      </div>
    </div>
    <!--<el-row :gutter="30">-->
      <!--<el-col :span="11">-->
        <!--{{$t('qualityCheck.terResult')}}-->
      <!--</el-col>-->
      <!--<el-col :span="13">-->
        <!--<span class="totalScore" v-if="gradeObj.amount === 'yes'">{{$t('qualityCheck.quaPass')}}</span>-->
        <!--<span class="totalScore" v-else-if="gradeObj.amount === 'no'">{{$t('qualityCheck.quaNoPass')}}</span>-->
        <!--<span class="totalScore" v-else-if="gradeObj.amount === 'dont'">{{$t('qualityCheck.buSheJi')}}</span>-->
      <!--</el-col>-->
    <!--</el-row>-->

    <el-form label-position="left" label-width="100px">
      <el-form-item :label="$t('qualityCheck.terResult') + '：'">
        <span class="totalScore" v-if="gradeObj.amount === 'yes'" style="color:#41b27f;">{{$t('qualityCheck.quaPass')}}</span>
        <span class="totalScore" v-else-if="gradeObj.amount === 'no'" style="color:#ff6b6b;">{{$t('qualityCheck.quaNoPass')}}</span>
        <span class="totalScore" v-else-if="gradeObj.amount === 'dont'" style="color:#ff8403;">{{$t('qualityCheck.buSheJi')}}</span>
      </el-form-item>
      <!--<el-form-item label="质检点评：">-->
        <!--<el-input-->
          <!--style="width:80%;"-->
          <!--type="textarea"-->
          <!--:rows="3"-->
          <!--:placeholder="$t('public.pleaseEnter')"-->
          <!--v-model.trim="gradeObj.COMMENT" :disabled="disabled">-->
        <!--</el-input>-->
      <!--</el-form-item>-->
    </el-form>
    <!--<div class="scoring">-->
      <!--<el-button size="mini" @click="off">{{$t('public.cancel')}}</el-button>-->
      <!--<el-button size="mini" @click.stop="nextGrade" v-if="passBtn">{{$t('qualityCheck.passNext')}}</el-button>-->
      <!--<el-button size="mini" type="primary" @click="save" v-if="!disabled">{{saveBtn}}</el-button>-->
    <!--</div>-->
  </div>
</template>
<script >
  import item from '../Check/item.vue'
  export default {
    name: 'passTemp',
    components: {
      item
    },
    data () {
      return {
      }
    },
    props: {
      configList: Array,
      form: Object,
      gradeObj: Object,
      saveBtn: {type: String, default: ''},
      disabled: {type: Boolean, default: false},
      passBtn: {type: Boolean, default: true}
    },
    watch: {
      form: {
        deep: true,
        handler: function (newV) {
          let flog = true
          let arr = []
          for (let i = 0; i < this.configList.length; i++) {
            let item = this.configList[i]
            if (!this.form[item.name]) {
              flog = false
              break
            }
            arr.push(this.form[item.name])
          }
          if (flog) {
            let yes = 0
            let no = 0
            arr.forEach(item => {
              if (item === 'yes') {
                yes++
              } else if (item === 'no') {
                no++
              } else {
              }
            })
            if (no === 0) {
              if (yes !== 0) {
                this.gradeObj.amount = 'yes'
              } else {
                this.gradeObj.amount = 'dont'
              }
            } else {
              this.gradeObj.amount = 'no'
            }
          }
        }
      }
    },
    methods: {
      off () {
        this.$emit('off')
      },
      nextGrade () {
        this.$emit('nextGrade')
      },
      save () {
        for (let i in this.form) {
          if (!this.form[i]) {
            this.$message.error(this.$t('qualityCheck.noQualityResult'))
            return
          }
        }
        if (this.disabled) {
          return
        }
        this.$emit('save', this.gradeObj)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .pass-temp
    /*padding 0 20px*/
  .pass-temp-tree
    padding 0
  .scoring
    text-align center
    color $cf-white
    margin-top 40px
    span
     display inline-block
     padding 10px 26px
     border-radius 4px
     cursor pointer
    .save
      margin-left 40px
  .el-row
    margin-top 12px
    .el-col-7
    .el-col-11
      line-height 36px
    .el-col-13
      line-height 36px
      .totalScore
        display block
        color $cf-blue
</style>
